iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 8
0
自我挑戰組

Angular 學習雜記系列 第 8

Angular 學習雜記-Angular的服務(Service)元件

  • 分享至 

  • xImage
  •  
在Angular,為什麼需要服務(Service)元件,因為在元件(Component),不應該直接獲取或儲存資料,它們應該聚焦於展示資料,而把資料訪問的職責委託給某個服務才對。

而在資料庫的對應上,也是在服務(Service)元件,這一層來做,無論是呼叫Web API或是用模擬的假資料。而為了要建立服務(Service)元件。我們要先之前範例上的陣列資料,建立出對應的資料類別。讓後續的服務(Service)元件或Web API都可以應該的到。

所以,在app目錄,選取子視窗,選取「New File」,直接輸入「employeeinfo.ts」,注意的是,連副檔名,都要輸入。來建立對應的資料類別,程式碼如下:
export class Employeeinfo {
  // 編號
  id: number;
  // 員工編號
  serialnumber: string;
  // 姓名
  name: string;
  // 地址
  address: string;
}

原來的employeelist.ts,要修改為,依資料類別,來設定陣列資料,如下程式碼:

// 引用資料類別
import { Employeeinfo } from './employeeinfo';

export const employeelist: Employeeinfo[] = [
    { id: 1, serialnumber: 'W01', name: '張三', address: '台北市內湖區' },
    { id: 2, serialnumber: 'W02', name: '李四', address: '台北市信義區' },
    { id: 3, serialnumber: 'W03', name: '王五', address: '' }
];

後續,再來討論如何建立出一個服務(Service)元件,讓我們可以呼叫後,取得原來的員工資料。


上一篇
Angular 學習雜記-Angular程式指令說明(續)
下一篇
Angular 學習雜記-Angular的服務(Service)元件(續)
系列文
Angular 學習雜記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言